import React from 'react'
import { clsx } from 'clsx'

export interface AvatarProps {
  src?: string
  alt?: string
  size?: 'sm' | 'md' | 'lg' | 'xl'
  variant?: 'user' | 'ai' | 'system'
  fallback?: string
  status?: 'online' | 'offline' | 'busy' | 'away'
  className?: string
}

export const Avatar: React.FC<AvatarProps> = ({
  src,
  alt = '',
  size = 'md',
  variant = 'user',
  fallback,
  status,
  className = ''
}) => {
  const sizeClasses = {
    sm: 'w-8 h-8 text-xs',
    md: 'w-10 h-10 text-sm',
    lg: 'w-12 h-12 text-base',
    xl: 'w-16 h-16 text-lg'
  }

  const variantClasses = {
    user: 'bg-gradient-to-br from-blue-400 to-blue-600 text-white',
    ai: 'bg-gradient-to-br from-orange-400 to-orange-600 text-white',
    system: 'bg-gradient-to-br from-gray-400 to-gray-600 text-white'
  }

  const statusColors = {
    online: 'bg-green-400',
    offline: 'bg-gray-400',
    busy: 'bg-red-400',
    away: 'bg-yellow-400'
  }

  const baseClasses = `
    relative inline-flex items-center justify-center
    rounded-full flex-shrink-0 font-semibold
    ring-2 ring-white shadow-lg
    transition-all duration-200 ease-out
  `

  // 获取默认显示内容
  const getDisplayContent = () => {
    if (src) {
      return (
        <img 
          src={src} 
          alt={alt}
          className="w-full h-full object-cover rounded-full"
          onError={(e) => {
            // 图片加载失败时显示fallback
            e.currentTarget.style.display = 'none'
          }}
        />
      )
    }
    
    if (fallback) {
      return fallback
    }

    // 根据类型显示不同的默认图标
    switch (variant) {
      case 'user':
        return '👤'
      case 'ai':
        return '🤖'
      case 'system':
        return '⚙️'
      default:
        return '👤'
    }
  }

  return (
    <div className="relative inline-block">
      <div
        className={clsx(
          baseClasses,
          sizeClasses[size],
          variantClasses[variant],
          className
        )}
      >
        {getDisplayContent()}
      </div>
      
      {/* 状态指示器 */}
      {status && (
        <div className={clsx(
          'absolute -bottom-0.5 -right-0.5',
          'w-3 h-3 rounded-full ring-2 ring-white',
          statusColors[status]
        )} />
      )}
    </div>
  )
}

// AI专用头像组件
export const AIAvatar: React.FC<Omit<AvatarProps, 'variant'> & { model?: string }> = ({
  model,
  ...props
}) => {
  // 根据模型显示不同的AI头像
  const getModelEmoji = (modelName?: string) => {
    if (!modelName) return '🤖'
    
    if (modelName.toLowerCase().includes('gpt-4')) return '🧠'
    if (modelName.toLowerCase().includes('gpt-3.5')) return '💭'
    if (modelName.toLowerCase().includes('claude')) return '🎭'
    return '🤖'
  }

  return (
    <Avatar
      variant="ai"
      fallback={getModelEmoji(model)}
      alt={`${model || 'AI'} 助手`}
      {...props}
    />
  )
}

// 用户头像组件
export const UserAvatar: React.FC<Omit<AvatarProps, 'variant'> & { username?: string }> = ({
  username,
  fallback,
  ...props
}) => {
  // 从用户名生成首字母
  const getInitials = (name?: string) => {
    if (!name) return '👤'
    return name.slice(0, 2).toUpperCase()
  }

  return (
    <Avatar
      variant="user"
      fallback={fallback || getInitials(username)}
      alt={username || '用户'}
      {...props}
    />
  )
}